import "./jquery.pagination.js";
class List{
    constructor(){
        // 获取渲染的父元素
        this.list = $("main .list");
        // 获取分页元素
        this.page = $(".page");
        // 获取价格排序按钮
        this.price = $(".price");
        // 获取所有的按钮
        this.buts = $(".nav_content dl dd a");
        // 获取价格降序按钮
        this.pricedesc = $(".price-desc");
    }
    init(){
        this.render();
    }
    render(){
        let _this = this;
        $.ajax({
            url:"http://localhost:3000/list",
            dataType:"json",
        }).then((data)=>{
            console.log(data)
            rand(data);

            _this.page.pagination({
                pageCount: data.pagesize,//总页数
                jump: true,//是否开启跳转到指定页数，值为boolean类型
                coping: true,//是否开启首页和末页，值为boolean
                homePage: '首页',
                endPage: '末页',
                prevContent: '上页',
                nextContent: '下页',
                jumpIptCls: 'jump-ipt',
                callback: function (api) {
                    // console.log(api.getCurrent());//获取当前点击的分页的页面
                    $(".jump-ipt").val(api.getCurrent());
                    $.ajax({
                      url:'http://localhost:3000/list',
                      data:{
                        page:api.getCurrent()
                      },
                      dataType:'json'
                    }).then(function(data){
                        rand(data);
                    })
                }
            });

            $(".jump-ipt").val("1");

            // 升序排序功能的实现
        _this.price.on("click",function(){
            $('.page').pagination({
                pageCount: data.pagesize,//总页数
                jump: true,//是否开启跳转到指定页数，值为boolean类型
                coping: true,//是否开启首页和末页，值为boolean
                homePage: '首页',
                endPage: '末页',
                prevContent: '上页',
                nextContent: '下页',
                jumpIptCls: 'jump-ipt',
                callback: function (api) {
                $(".jump-ipt").val("1");
                    $.ajax({
                      url:'http://localhost:3000/list',
                      data:{//后续的每一页都是排序好的
                        page:api.getCurrent(),
                        sort:'asc'
                      },
                      dataType:'json'
                    }).then(function(data){
                        rand(data);
                    })
                }
            });
            $.ajax({
                url:'http://localhost:3000/list',
                data:{//回到第一页，第一个开始进行升序排列
                  page:1,
                  sort:'asc'
                },
                dataType:'json'
              }).then(function(data){
                rand(data);
              })
            
        })

        // 价格降序
        _this.pricedesc.on("click",function(){
            $('.page').pagination({
                pageCount: data.pagesize,//总页数
                jump: true,//是否开启跳转到指定页数，值为boolean类型
                coping: true,//是否开启首页和末页，值为boolean
                homePage: '首页',
                endPage: '末页',
                prevContent: '上页',
                nextContent: '下页',
                jumpIptCls: 'jump-ipt',
                callback: function (api) {
                $(".jump-ipt").val("1");
                    $.ajax({
                      url:'http://localhost:3000/list',
                      data:{//后续的每一页都是排序好的
                        page:api.getCurrent(),
                        sort:'desc'
                      },
                      dataType:'json'
                    }).then(function(data){
                        rand(data);
                    })
                }
            });
            $.ajax({
                url:'http://localhost:3000/list',
                data:{//回到第一页，第一个开始进行升序排列
                  page:1,
                  sort:'desc'
                },
                dataType:'json'
              }).then(function(data){
                rand(data);
              })
            
        })
        })

        // 封装渲染函数
        function rand(data){
            let str = "";
            $.each(data.pagecontent,function(index,content){
                str += `
            <li>
                <a href="http://localhost:3000/detail.html?id=${content._id}">
                    <p class="top"><span>新品 </span><span>免息</span><span>买赠</span><span>以旧换新</span></p>
                    <img data-original="${content.image}" alt="" class="lazy" />
                    <i></i>
                    <p class="title">${content.name}</p>
                    <span>¥${content.pPrice}.00</span>
                </a>
            </li>
            `
            })
            _this.list.html(str)
    
            // 2.渲染完成使用懒加载（图片），利用jquery插件实现(jquery.lazyload.js)
            // 懒加载的原理：
            // 大量的商品图片使用懒加载，加强用户体验。
            // 将图片的src地址给一个自定义的属性,一旦图片进入的可视区，里面将自定义的属性改成src，图片就会显示。
            $("img.lazy").lazyload({
                effect : "fadeToggle"
            });
        }

        _this.buts.on("click",function(){
            $(this).parent().parent().find("a").removeClass("active");
            $(this).addClass("active");
        })
        
    }
    

}
export{
    List
}